#{extends 'main.html' /}
#{set title:'Publicaciones' /}
<meta charset="UTF-8"/>
<form class="well form-search" action="@{Publicaciones.buscar()}" style="text-align: center;">
	<input name="buscar" type="text" class="span8" placeholder=" :::: Buscar Publicacion :::: " autofocus="autofocus" autocomplete="off" />
	<button class="btn">Buscar</button>
</form>
<ul class="breadcrumb">
  <li class="active">
    <a href="@{Application.index()}">Home</a> <span class="divider">/</span>
  </li>
  <li>${publicacion.deTitulo}</li>  
</ul>
<div class="row-fluid">
	<div class="span12">
		<div class="row-fluid">
			<div class="span5">
				<a class="thumbnail"> 
				<img src="/public/images/publicaciones/laptop.jpg" />
				</a>
			</div>
			<div class="span7">
				<h1>${publicacion.deTitulo}</h1>
				<br/>
				<p><strong style="font-size: 24px;color: #900">${publicacion.nuPrecio}</strong></p>
				<p><strong>Nuevo : </strong> ${publicacion.stIsNuevo=="1" ? 'SI' : 'NO'}</p>
				<p><strong>Cantidad : </strong>${publicacion.nuCantidad}</p>
				<button class="btn btn-primary btn-large" id="btnComprarPublicacion">Comprar</button>
				<hr/>
				<p><strong>Vendedor</strong></p>
				
				<p>Usuario :  <strong>${publicacion.persona.deNombre}</strong></p>
				<p>Telefono : <strong>${publicacion.persona.deTelefono}</strong></p>
			</div>
		</div>
	</div>
</div>
<hr/>
<div class="well">
	<div class="row-fluid">
		<div class="span12">
			<div class="row-fluid">
				<h2>Descripcion</h2>
				<p>${publicacion.deDescripcion}</p>
			</div>
		</div>
	</div>
</div>
<div class="modal hide" id="layoutComprar">
	<div class="modal-header">
		<h2>Confirma tu Compra</h2>
	</div>
	<div class="modal-body">
		<div style="text-align: center;">
			<h3>LAPTOP ACER</h3>
		</div>		
		<div class="thumbnail">
			<img src="/public/images/publicaciones/laptop.jpg" alt=""/>
		</div>
		<br/>
		<form class="form-horizontal" action="@{Publicaciones.comprarPublicacion()}">
			<input type="hidden" name="compra.publicacion.coPublicacion" value="${publicacion.coPublicacion}"/>
			<input type="hidden" name="compra.persona.coPersona" value="${coSession}"/>
			<div class="control-group">
				<label class="control-label">Cantidad</label>
				<div class="controls">
					<input type="number" class="input-mini" style="text-align: center;" required="required" value="1" min="1" max="100" maxlength="2" autocomplete="off" name="compra.nuCantidad"/>
					de : <strong>900</strong>
					<button class="btn btn-primary">Comprar</button>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">Precio : </label>
				<div class="controls">
					<div class="input-prepend">
						<span class="add-on">$$</span>
						<input type="text" disabled="disabled" class="span2" style="text-align: right;" value="150000"/>						
					</div>					
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">Comentario</label>
				<div class="controls">
					<textarea required="required" name="" rows="" cols=""></textarea>
				</div>
			</div>
		</form>
	</div>
	<div class="modal-footer"></div>
</div>
<script type="text/javascript">
var Publicacion = {
		init : function(){
			$(document).delegate("#btnComprarPublicacion","click",Publicacion.comprar);
		},
		comprar : function(){
			$('#layoutComprar').modal('show')
		}
}
$(function(){
	Publicacion.init();
})
</script>